<template>
  <div class="app-container">
    <div v-if="dataViewVisible" class="top">
      <div>{{projectInfo.projectName}}</div>
      <div style="margin-left: 0.5rem">
        <el-select v-model="oaType"
                   @change="handleChange"
                   placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <!-- <el-button type="primary">新建项目</el-button> -->
    </div>
    <div v-if="dataViewVisible" class="main">
      <div class="project" v-for="(item,index) in progressList" :key="index">
        <div class="project_top">
          <div class="title">
            <svg-icon class="title_icon" :icon-class="item.icon" />
            {{ item.progress }}
          </div>

          <svg-icon class="state_icon" icon-class="ywc" v-if="item.state == '2'" />
          <svg-icon class="state_icon" icon-class="jxz" v-else-if="item.state == '1'" />
          <el-button type="primary" @click="pushApply(item)" v-else>申请</el-button>
        </div>
        <div class="project_form" >
          <el-button @click="openFormView(item,index)">查看业务单据</el-button>
        </div>
        <!-- <el-card class="box-card">
          <div class="project_files">
            <div class="left">
              <svg-icon class="box_icon" icon-class="pm_project" />附件
            </div>
            <div class="right">
              <div
                class="file_link"
                @click="openPDF(file)"
                v-for="(file,index1) in item.files"
                :key="index1"
              >{{ file.fileName }}</div>
            </div>
          </div>
        </el-card>-->
        <el-card class="box-card">
          <div class="project_timeline">
            <div class="left">
              <svg-icon class="box_icon" icon-class="pm_progress" />审批历史
            </div>
            <div class="right">
              <el-timeline v-if="item.time_line && item.time_line.length > 0">
                <el-timeline-item
                  :timestamp="time.endTime"
                  placement="top"
                  v-for="(time,index) in item.time_line"
                  :key="index"
                  color="#409eff"
                >
                  <div class="user">{{time.name}}:{{time.nickName}}</div>
                  <div class="remark">{{time.comment?`审批意见：${time.comment}`:null}}</div>
                </el-timeline-item>
              </el-timeline>
              <div v-else >当前流程暂无审批历史</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="form-container" v-if="dynamicFormEditVisible">
      <div class="form-container-header">
        <i class="el-dialog__close el-icon el-icon-close" @click="closeDynamicEdit"></i></div>
      <approvalForm ref="approvalForm"
                    :businessKey = 'businessKey'
                    :taskId = 'taskId'
                    :confirmVisible=false
                    @closeForm = 'closeDynamicEdit'
                    :dynamicFormData='dynamicFormData'
                    :parentTaskId = 'parentTaskId'
                    :currProcessForm = 'currProcessForm'
                    :processInstanceId = 'processInstanceId'/>
    </div>
  </div>
</template>

<script>
import approvalForm from "@/views/components/approvalForm";
import card from "@/views/homePage/components/card";
import apiProcessInst from '@/api/workflow/processInst'
import {queryPurchaseApplyByProjectName} from "@/api/oa/purchaseApply"
import {queryPurchaseParityByProjectName} from "@/api/oa/purchaseParity"
import {queryPurchaseContactByProjectName} from "@/api/oa/purchaseContact"
import {queryPurchaseStampByProjectName} from "@/api/oa/purchaseStamp"
import {queryPurchaesPaymentByProjectName} from "@/api/oa/purchaesPayment"
import {queryFinanceTripByProjectName} from "@/api/oa/financeTripApply";
import {queryFinanceEntertainByProjectName} from "@/api/oa/financeEntertain";
import {queryFinanceSubmitByProjectName} from "@/api/oa/financeSubmit";
import {queryFinanceTravelByProjectName} from "@/api/oa/financeTravel";
import {queryFinanceImprestByProjectName} from "@/api/oa/financeImprest";
import {queryFinanceBudgetByProjectName} from "@/api/oa/financeBudget";
import {queryFinancePaymentByProjectName} from "@/api/oa/financePayment";
// import myApprovals from "./components/myApprovals.vue";
export default {
  data() {
    return {
      dataViewVisible: true,
      taskId:undefined,
      processInstanceId: undefined,
      businessKey: undefined, // 业务唯一标识
      currProcessForm: '', //表单组件名称
      activeTab: "myApprovals",
      title: "我的申请",
      componentName: "purchaseApply",
      progressList: [
        {
          state: "3",
          icon: "caigou",
          progress: "采购申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: []
        },
        {
          state: "3",
          icon: "bijia",
          progress: "比价申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: [
          ]
        },
        {
          state: "3",
          icon: "hetong",
          progress: "合同申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: [
          ]
        },
        {
          state: "3",
          icon: "gaizhang",
          progress: "盖章申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: []
        },
        {
          state: "3",
          icon: "fukuan",
          progress: "付款申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [],
          time_line: []
        }
      ],
      purchaseList:[
        {
          state: "3",
          icon: "caigou",
          progress: "采购申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: []
        },
        {
          state: "3",
          icon: "bijia",
          progress: "比价申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: [
          ]
        },
        {
          state: "3",
          icon: "hetong",
          progress: "合同申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: [
          ]
        },
        {
          state: "3",
          icon: "gaizhang",
          progress: "盖章申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: []
        },
        {
          state: "3",
          icon: "fukuan",
          progress: "付款申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [],
          time_line: []
        }
      ],
      financeList:[
        // {
        //   state: "3",
        //   icon: "chuchai",
        //   progress: "出差申请",
        //   taskId:undefined,
        //   processInstanceId: undefined,
        //   businessKey: undefined, // 业务唯一标识
        //   currProcessForm: '', //表单组件名称
        //   files: [
        //   ],
        //   time_line: []
        // },
        {
          state: "3",
          icon: "zhaodai",
          progress: "招待申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
          ],
          time_line: [
          ]
        },
        {
          state: "3",
          icon: "yusuan",
          progress: "报销申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            },
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: [
          ]
        },
        {
          state: "3",
          icon: "chuchai",
          progress: "差旅费申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
            {
              fileName: "采购申请表格.xlsx"
            }
          ],
          time_line: []
        },
        {
          state: "3",
          icon: "yusuan",
          progress: "备用金申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
          ],
          time_line: []
        },
        {
          state: "3",
          icon: "yusuan",
          progress: "预算申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
          ],
          time_line: []
        },
        {
          state: "3",
          icon: "fukuanl",
          progress: "财务付款申请",
          taskId:undefined,
          processInstanceId: undefined,
          businessKey: undefined, // 业务唯一标识
          currProcessForm: '', //表单组件名称
          files: [
          ],
          time_line: []
        },
      ],
      projectInfo:'',
      oaType:'采购部OA流程',
      options:[{
        label:"采购部OA流程",
        value:"采购部OA流程"
      // },{
      //   label:"人力资源部OA流程",
      //   value:"人力资源部OA流程"
      // },{
      //   label:"行政部OA流程",
      //   value:"行政部OA流程"
      },{
        label:"财务部OA流程",
        value:"财务部OA流程"
      }],
      purchaseApplyInstanceId:'',
      purchaseParityInstanceId:'',
      purchaseContactInstanceId:'',
      purchaseStampInstanceId:'',
      purchasePaymentInstanceId:'',
      dynamicFormEditVisible: false,
      dynamicFormData:{},
      parentTaskId:null,
    };
  },
  components: {
    card,
    approvalForm
    // myApprovals
  },
  mounted() {
    this.projectInfo=this.$route.query.row;
    console.log(this.projectInfo)
    if (!this.projectInfo.projectName){
      this.$router.push("/pm/myProject")
    }else {
      this.queryPurchaseApplyByProjectName();
      this.queryPurchaseParityByProjectName();
      this.queryPurchaseContactByProjectName();
      this.queryPurchaseStampByProjectName();
      this.queryPurchaesPaymentByProjectName();
    }
    // let length = document.querySelectorAll(".el-progress__text").length;
    // for (let index = 0; index < length; index++) {
    //   document.querySelectorAll(".el-progress__text")[index].style.display =
    //     "none";
    // }
    this.$nextTick(()=>{
      let a=document.querySelector(".el-timeline");
      console.log(a)
    },300)
  },
  methods: {
    handleClick() {},
    setComponent(apply) {
      this.title = `我的申请（${apply.applyName}）`;
      this.componentName = apply.component;
    },
    format(percentage) {
      return "";
    },
    openPDF() {},
    queryPurchaseApplyByProjectName(){
      queryPurchaseApplyByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data){
          let a=response.data.actBusinessStatus;
          if (a.status!="finish"&&a.status!="draft"){
            this.progressList[0].state='1';
          }else if (a.status=="finish"){
            this.progressList[0].state='2';
          }else if (a.status == "draft") {
            this.progressList[0].state = "3";
            return;
          }else{
            this.progressList[0].state = "4";
          }
          this.progressList[0].taskId=a.id;
          this.progressList[0].businessKey=a.businessKey;
          this.progressList[0].processInstanceId=a.processInstanceId;
          this.progressList[0].currProcessForm="purchaseApplyForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[0].time_line = res.data
            })
          }
        }
      })
    },
    queryPurchaseParityByProjectName(){
      queryPurchaseParityByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[1].state = '1';
          } else if (a.status == "finish") {
            this.progressList[1].state = '2';
          } else if (a.status == "draft") {
            this.progressList[1].state = "3";
            return;
          }else{
            this.progressList[1].state = "4";
          }
          this.progressList[1].businessKey=a.businessKey;
          this.progressList[1].processInstanceId=a.processInstanceId;
          this.progressList[1].currProcessForm="purchaseParityForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[1].time_line = res.data
            })
          }
        }
      })
    },
    queryPurchaseContactByProjectName(){
      queryPurchaseContactByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[2].state = '1';
          } else if (a.status == "finish") {
            this.progressList[2].state = '2';
          } else if (a.status == "draft") {
            this.progressList[2].state = "3";
            return;
          }else{
            this.progressList[2].state = "4";
          }
          this.progressList[2].businessKey=a.businessKey;
          this.progressList[2].processInstanceId=a.processInstanceId;
          this.progressList[2].currProcessForm="purchaseContactForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[2].time_line = res.data
            })
          }
        }
      })
    },
    queryPurchaseStampByProjectName(){
      queryPurchaseStampByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[3].state = '1';
          } else if (a.status == "finish") {
            this.progressList[3].state = '2';
          } else if (a.status == "draft") {
            this.progressList[3].state = "3";
            return;
          }else{
            this.progressList[3].state = "4";
          }
          this.progressList[3].businessKey=a.businessKey;
          this.progressList[3].processInstanceId=a.processInstanceId;
          this.progressList[3].currProcessForm="purchaseStampForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[3].time_line = res.data
            })
          }
        }
      })
    },
    queryPurchaesPaymentByProjectName(){
      queryPurchaesPaymentByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[4].state = '1';
          } else if (a.status == "finish") {
            this.progressList[4].state = '2';
          } else if (a.status == "draft") {
            this.progressList[4].state = "3";
            return;
          }else{
            this.progressList[4].state = "4";
          }
          this.progressList[4].businessKey=a.businessKey;
          this.progressList[4].processInstanceId=a.processInstanceId;
          this.progressList[4].currProcessForm="purchaesPaymentForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[4].time_line = res.data
            })
          }
        }
      })
    },
    queryFinanceTripByProjectName(){
      queryFinanceTripByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[0].state = '1';
          } else if (a.status == "finish") {
            this.progressList[0].state = '2';
          } else if (a.status == "draft") {
            this.progressList[0].state = "3";
            return;
          }else{
            this.progressList[0].state = "4";
          }
          this.progressList[0].businessKey=a.businessKey;
          this.progressList[0].processInstanceId=a.processInstanceId;
          this.progressList[0].currProcessForm="financeTripApplyForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[0].time_line = res.data
            })
          }
        }
      })
    },
    queryFinanceEntertainByProjectName(){
      queryFinanceEntertainByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[1].state = '1';
          } else if (a.status == "finish") {
            this.progressList[1].state = '2';
          } else if (a.status == "draft") {
            this.progressList[1].state = "3";
            return;
          }else{
            this.progressList[1].state = "4";
          }
          this.progressList[1].businessKey=a.businessKey;
          this.progressList[1].processInstanceId=a.processInstanceId;
          this.progressList[1].currProcessForm="financeEntertainForm"
          this.purchasePaymentInstanceId = a.processInstanceId;
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[1].time_line = res.data
            })
          }
        }
      })
    },
    queryFinanceSubmitByProjectName(){
      queryFinanceSubmitByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[2].state = '1';
          } else if (a.status == "finish") {
            this.progressList[2].state = '2';
          } else if (a.status == "draft") {
            this.progressList[2].state = "3";
            return;
          }else{
            this.progressList[2].state = "4";
          }
          this.progressList[2].businessKey=a.businessKey;
          this.progressList[2].processInstanceId=a.processInstanceId;
          this.progressList[2].currProcessForm="financeSubmitForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[2].time_line = res.data
            })
          }
        }
      })
    },
    queryFinanceTravelByProjectName(){
      queryFinanceTravelByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[3].state = '1';
          } else if (a.status == "finish") {
            this.progressList[3].state = '2';
          } else if (a.status == "draft") {
            this.progressList[3].state = "3";
            return;
          }else{
            this.progressList[3].state = "4";
          }
          this.progressList[3].businessKey=a.businessKey;
          this.progressList[3].processInstanceId=a.processInstanceId;
          this.progressList[3].currProcessForm="financeTravelForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[3].time_line = res.data
            })
          }
        }
      })
    },
    queryFinanceImprestByProjectName(){
      queryFinanceImprestByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[4].state = '1';
          } else if (a.status == "finish") {
            this.progressList[4].state = '2';
          } else if (a.status == "draft") {
            this.progressList[4].state = "3";
            return;
          }else{
            this.progressList[4].state = "4";
          }
          this.progressList[4].businessKey=a.businessKey;
          this.progressList[4].processInstanceId=a.processInstanceId;
          this.progressList[4].currProcessForm="financeImprestForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[4].time_line = res.data
            })
          }
        }
      })
    },
    queryFinanceBudgetByProjectName(){
      queryFinanceBudgetByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[5].state = '1';
          } else if (a.status == "finish") {
            this.progressList[5].state = '2';
          } else if (a.status == "draft") {
            this.progressList[5].state = "3";
            return;
          }else{
            this.progressList[5].state = "4";
          }
          this.progressList[5].businessKey=a.businessKey;
          this.progressList[5].processInstanceId=a.processInstanceId;
          this.progressList[5].currProcessForm="financeBudgetForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[5].time_line = res.data
            })
          }
        }
      })
    },
    queryFinancePaymentByProjectName(){
      queryFinancePaymentByProjectName({
        projectName:this.projectInfo.projectName
      }).then(response=>{
        if (response.data) {
          let a = response.data.actBusinessStatus;
          if (a.status != "finish" && a.status != "draft") {
            this.progressList[6].state = '1';
          } else if (a.status == "finish") {
            this.progressList[6].state = '2';
          } else if (a.status == "draft") {
            this.progressList[6].state = "3";
            return;
          }else{
            this.progressList[6].state = "4";
          }
          this.progressList[6].businessKey=a.businessKey;
          this.progressList[6].processInstanceId=a.processInstanceId;
          this.progressList[6].currProcessForm="financePaymentForm"
          if (a.processInstanceId) {
            apiProcessInst.getHistoryInfoList(a.processInstanceId).then(res => {
              res.data.sort((a, b) => {
                return b.startTime > a.startTime ? -1 : 1
              })
              this.progressList[6].time_line = res.data
            })
          }
        }
      })
    },
    handleChange(val){
       if (val=='采购部OA流程'){
          this.progressList=this.purchaseList;
          this.queryPurchaseApplyByProjectName();
          this.queryPurchaseParityByProjectName();
          this.queryPurchaseContactByProjectName();
          this.queryPurchaseStampByProjectName();
          this.queryPurchaesPaymentByProjectName();
       }else if (val=="财务部OA流程"){
         this.progressList=this.financeList;
         // this.queryFinanceTravelByProjectName();
         this.queryFinanceSubmitByProjectName();
         this.queryFinanceImprestByProjectName();
         this.queryFinanceTripByProjectName();
         this.queryFinanceEntertainByProjectName();
         this.queryFinanceBudgetByProjectName();
         this.queryFinancePaymentByProjectName();
       }
    },
    //关闭办理弹出层
    closeDynamicEdit(){
      this.dynamicFormEditVisible = false;
      this.dataViewVisible = true
    },
    //打开业务单据
    openFormView(item,index){
      if (item.state!='4'&&item.state!='3'){
        this.taskId=item.target;
        this.businessKey=item.businessKey;
        this.processInstanceId=item.processInstanceId;
        this.currProcessForm=item.currProcessForm;
        this.dynamicFormEditVisible = true
        this.dataViewVisible = false
      }else {
        this.$message.error(item.progress+"没有提交申请")
      }
    },
    pushApply(apply){
      let applies=apply;
      applies.title=apply.progress;
      applies.svgName=apply.icon;
      applies.projectName=this.projectInfo.projectName;
      this.$router.push({
        path:"/oa2/apply",
        query:{
          apply:applies
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: hidden;
  background: #edefef;
  letter-spacing: 0.02rem;
  .top {
    width: 100%;
    margin-bottom: 0.125rem;
    background-color: #ffffff;
    height: 0.4875rem;
    display: flex;
    align-items: center;
    //justify-content: space-between;
    font-size: 0.225rem;
    font-weight: 600;
    color: #000000;
    padding: 0.48rem;
  }
  .main {
    width: 100%;
    display: flex;
    overflow-x: auto;
    //justify-content: space-between;
    height: calc(100% - 0.125rem - 0.48rem - 0.48rem);
    .project {
      padding: 0.3rem;
      min-width: calc(20% - 0.1rem);
      height: 98%;
      background: #ffffff;
      margin-bottom: 0.125rem;
      margin-right: 0.125rem;
      &:last-child {
        margin-right: 0;
      }
      .project_top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .title {
          display: flex;
          font-size: 0.225rem;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 0.2rem;
        }
      }
      .project_form {
        margin-bottom: 0.2rem;
      }
      .project_files,
      .project_timeline {
        height: 100%;
        .left {
          margin-bottom: 0.2rem;
          // margin-right: 0.125rem;
          font-size: 0.2rem;
          color: rgb(168, 174, 187);
        }
        .right {
          overflow: auto;
          .file_link {
            margin: 0.08rem 0;
            cursor: pointer;
            font-size: 14px;
            color: #409eff;
            &:hover {
              color: #409eff;
            }
          }
        }
      }
      .project_timeline {
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}

.title_icon {
  font-size: 30px;
  margin-right: 0.125rem;
}
.state_icon {
  font-size: 30px;
}
.box_icon {
  font-size: 20px;
  margin-right: 0.125rem;
}
.box-card {
  overflow: auto;
  margin-bottom: 0.2rem;
  height: 80%;
}
.form-container-header{
  height: 30px;
  padding-bottom: 10px;
}
.el-icon-close{
  float: right;
  cursor: pointer;
}
</style>
